<template>
	<view>
		<view class="goods-list">
			<view v-for="(item, i) in goodsList" :key="i" >
				<view class="goods-item" @click="gotoDetail(item)">
					<view class="goods-item-left">
						<image :src="item.goods_small_logo || defaultPic"  class="goods-pic"></image>
					</view>
					<view class="goods-item-right">
						<view class="goods-name">{{item.goods_name}}</view>
						<view class="goods-info-box">
							<view class="goods-price">${{item.goods_price}}</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryInfo:{
					query:'',
					// 商品分类
					cid:'',
					pagenum:1,
					pagesize:10
				},
				goodsList:[],
				total:0,
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				isLoading:false
			
			};
		},
		methods:{
			async getGoodList(cd){
				this.isLoading = true
				console.log(this.queryInfo)
				const {data:result} =await uni.$http.get("/api/public/v1/goods/search",this.queryInfo)
				console.log(result.message)
				if (result.meta.status!== 200) return uni.$showMsg(result.meta.msg)
				cd && cd()
				this.goodsList = [...this.goodsList,...result.message.goods]
				this.total = result.message.total
				this.isLoading = false
			},
			gotoDetail(goods){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+goods.goods_id
				})
			}
		},
		onLoad(option) {
			console.log(option)
			this.queryInfo.cid = option.cid | '15'
			this.queryInfo.query = option.query| ''
			this.getGoodList()
		},
		onPullDownRefresh() {
			this.queryInfo.pagenum = 1
			this.goodsList = []
			this.total = 0
			this.isLoading = false
			this.getGoodList(() => uni.stopPullDownRefresh())
			
		},
		onReachBottom(){
			if (this.total < this.queryInfo.pagenum * this.queryInfo.pagesize) return uni.$showMsg("数据加载完毕")
			if (this.isloading) return
			this.queryInfo.pagenum = this.queryInfo.pagenum + 1
			this.getGoodList()
		}
		
		
	
	}
</script>

<style lang="scss" scoped>
	.goods-list{
		display: flex;
		flex-wrap: wrap;
		padding: 5px 10px;
		
		.goods-item{
			width: 750rpx;
			box-sizing: border-box;
			display: flex;
			padding: 15px 10px;
			
			.goods-item-left{
				margin-right: 5px;
				
				.goods-pic {
				      width: 100px;
				      height: 100px;
				      display: block;
				    }
			}
			
			.goods-item-right{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.goods-name {
				      font-size: 13px;
				    }
				
				.goods-info-box {
				    display: flex;
				    justify-content: space-between;
				    align-items: center;
				
				    .goods-price {
				        color: #C00000;
				        font-size: 16px;
				    }
				}
			}
		}
		
	}
</style>
